import { errorImage, isReactFunctionalComponent, isReactNode, isString, spliceString } from "@/utils/app_utils";
import { Card, Col, Flex, Image, Row, Space, Tag, Tooltip, Typography } from "antd";
import React, { ReactNode, ReactPropTypes } from "react";
import style from "./index.less"

const { Text } = Typography

interface ItemCardProp {
  pic?: string | ReactNode | React.FC;   // 
  title?: string | ReactNode | React.FC;
  viewNum?: string;
  updateDate?: string;
  description?: string;
  readictUrl?: string;
  author?: string;
  tags?: string[] | object[];
}

type ItemCardProps = ItemCardProp & React.ComponentProps<'div'>

const renderComp = (node: string | ReactNode | React.FC) => {
  if (isString(node)) {
    return node
  } else if (isReactNode(node)) {
    return node
  } else if (isReactFunctionalComponent(node)) {
    const Comp = node as React.FC
    return <Comp></Comp>
  }
}

export default function ItemCard(props : ItemCardProps) {
  return (<>
    <Card
      hoverable
      title = {<>
        <Image 
          src={renderComp(props.pic) as any} 
          width={'100%'}
          fallback={errorImage}
          preview={false}
          className={style.card_image}
        ></Image>
      </>}
      className={style.card}
      onClick={props.onClick}
    >
      <Row gutter={[0, 8]}>
        <Col span={24}>
          <Space>
            <Text strong> {renderComp(props.title)}</Text>
          </Space>
        </Col>
        
        <Col span={24}>
          <Space>
            {
            props.description && 
              <Tooltip title={props.description}>
                <Text>{spliceString(props.description)}</Text>
              </Tooltip>
            } 
          </Space>
        </Col>
        <Col span={24}>
          <Flex justify="flex-end" align="center" gap={12}>
            <Text>
              {props.author && props.author}             
            </Text>
            <Space>
              <Text>
                {props.updateDate}             
              </Text>
              <Text>
                {props.viewNum}
              </Text>
            </Space>
          </Flex>
        </Col>
        <Col span={24}>
          <Flex justify="flex-end">
            <Space>
              {props.tags?.map((item: any, idx) => {
                if (isString(item)) {
                  return <Tag key={idx} color="success">{item}</Tag>
                }
                return <Tag key={idx} color="success">{item?.name}</Tag>
              })}
            </Space>
            </Flex>
        </Col>
      </Row>
    </Card>
  </>)
}